﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="ProjectStudy.注册登录找回密码修改密码页面.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/jQuerySession.js" type="text/javascript"></script>
     <%--复选框、单选框--%>
    <script src="/Scripts/checkbix.js" type="text/javascript"></script>
    <script src="/Scripts/checkbix.min.js" type="text/javascript"></script>
    <link href="/Styles/checkbix.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/checkbix.min.css" rel="stylesheet" type="text/css" />

    <%--弹窗--%>
    <script src="/Scripts/zeroModal.js" type="text/javascript"></script>
    <script src="/Scripts/zeroModal.min.js" type="text/javascript"></script>
        <%--弹窗--%>
    <%--<link href="Styles/htmleaf-demo.css" rel="stylesheet" type="text/css" />--%>
    <link href="/Styles/normalize.css" rel="stylesheet" type="text/css" />
    <link href="/Styles/zeroModal.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        Checkbix.init();
    </script>
    <script type="text/javascript">
        $(function () {
            //setCookie("username", "ls");
            //setCookie("pwd", "123");
            //delCookie("username");
            //alert(getCookie("username") + "," + getCookie("pwd"));

            $("#logUsername").val(getCookie("username"));
            $("#logPwd").val(getCookie("pwd"));
            if (getCookie("pwd") != null && getCookie("pwd") != '') {
                $("#remPwd").attr("checked", true);
                $("#remUsername").attr("checked", true);
            }
            else if (getCookie("username") != null && getCookie("username") != '') {
                $("#remUsername").attr("checked", true);
                $("#remPwd").attr("checked", false);
            }
            else {
                $("#remUsername").attr("checked", false);
                $("#remPwd").attr("checked", false);
            }
            $(document).keydown(function (e) {
                if (e.keyCode == 13) {
                    $("#logLogin").click();
                }
            });

            $("#logUsername").val();
            //------------------记住密码勾选后记住账号同时勾选------------------------------------
            $("#remPwd").click(function () {
                var pwdChecked = $("#remPwd").attr("checked");
                if (pwdChecked) {
                    $("#remUsername").attr("checked", true);
                }
            });
            $("#remUsername").click(function () {
                var usernameChecked = $("#remUsername").attr("checked");
                if (!usernameChecked) {
                    $("#remPwd").attr("checked", false);
                }
            });
            //------------------记住密码勾选后记住账号同时勾选------------------------------------

            //------------------用户登录----------------------------------------------------------

            $("#logUsername").focus(function () {
                $("#logUsernameRequired").css("display", "none");
            });
            $("#logUsername").focusout(function () {
                if ($("#logUsername").val().length > 0) {
                    $("#logUsernameRequired").css("display", "none");
                }
                else {
                    $("#logUsernameRequired").css("display", "inherit");
                }
            });

            $("#logPwd").focus(function () {
                $("#logPwdRequired").css("display", "none");
            });
            $("#logPwd").focusout(function () {
                if ($("#logPwd").val().length > 0) {
                    $("#logPwdRequired").css("display", "none");
                }
                else {
                    $("#logPwdRequired").css("display", "inherit");
                }
            });

            $("#tbVerificationCode").focus(function () {
                $("#logCodeValid").css("display", "none");
            });

            $("#logClear").click(function () {
                $("#logUsernameRequired").css("display", "none");
                $("#logPwdRequired").css("display", "none");
                $("#logCodeValid").css("display", "none");
                $("#logUsername").val("");
                $("#logPwd").val("");
                $("#tbVerificationCode").val("");

            });

            $("#logLogin").click(function () {

                $("#logUsernameRequired").css("display", "none");
                $("#logPwdRequired").css("display", "none");
                $("#logCodeValid").css("display", "none");

                var username = $("#logUsername").val();
                var pwd = $("#logPwd").val();
                if (username.length == 0) {
                    $("#logUsernameRequired").css("display", "inherit");
                }
                if (pwd.length == 0) {
                    $("#logPwdRequired").css("display", "inherit");
                }

                $.ajax({
                    //要用post方式      
                    type: "Post",
                    //方法所在页面和方法名      
                    url: "Login.aspx/GetVerificationCode",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //返回的数据用data.d获取内容      
                        var code = $("#tbVerificationCode").val();
                        code = code.toUpperCase();
                        if (code == data.d) {
                            //alert("验证码验证成功");
                            $.ajax({
                                type: "post",
                                url: "/Ajax/RegisterLoginChangePwdFindPwd.ashx",
                                data: { "action": "login", "username": username, "pwd": pwd },
                                dataType: "json",
                                success: function (data) {
                                    if (data["status"] == "success") {

                                        if ($("#remPwd").attr("checked")) {
                                            setCookie("username", username);
                                            setCookie("pwd", pwd);
                                        }
                                        else if ($("#remUsername").attr("checked")) {
                                            setCookie("username", username);
                                            delCookie("pwd");
                                        }
                                        else {
                                            delCookie("username");
                                            delCookie("pwd");
                                        }
                                        location.href = "MainFrame.aspx";
                                    }
                                    else if (data["status"] == "usernameOrPwdErr") {
                                        $("#logPwd").val("");
                                        $("#tbVerificationCode").val("");
                                        $("#Img1").attr("src", "/Captcha.ashx?codelength=4&&id=" + Math.random());

                                        zeroModal.error({
                                            title: '提示',
                                            content: '账号或密码错误!'
                                        });
                                    }
                                    else if (data["status"] == "noActive") {
                                        zeroModal.error({
                                            title: '提示',
                                            content: '您的账号尚未激活，请联系管理员!'
                                        });
                                    }
                                    else if (data["status"] == "lock") {
                                        zeroModal.error({
                                            title: '提示',
                                            content: '您的账号已锁定，请联系管理员!'
                                        });
                                    }
                                },
                                error: function (err) {
                                    zeroModal.error({
                                        title: '错误',
                                        content: 'Ajax请求失败1!'
                                    });
                                }
                            });
                        }
                        else {
                            $("#logCodeValid").css("display", "inherit");
                            $("#tbVerificationCode").val("");
                            $("#Img1").attr("src", "/Captcha.ashx?codelength=4&&id=" + Math.random());
                        }
                    },
                    error: function (err) {
                        zeroModal.error({
                            title: '错误',
                            content: 'Ajax请求失败2!',
                            width: '200px',
                            height: '100px',
                            okFn: function () {
                                //回调函数
                            }
                        });
                    }
                });

            });
            //------------------用户登录----------------------------------------------------------

            $("#logRegister").click(function () {
                location.href = "Register.aspx";
            });
            $("#logFindPwd").click(function () {
                location.href = "FindPwd.aspx";
            });
        });

        //--------------------------Cookie-----------------------------------------------------------
        function setCookie(name1, value1) {
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name1 + "=" + value1+";expires=" + exp.toGMTString();
        }

        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
        //--------------------------Cookie-----------------------------------------------------------
    </script>
      <style type="text/css"> 
      html{ background-color:DeepSkyBlue;}
      .fatherDiv{width:550px;
               height:280px;
               background-color:white;
               text-align:center;
               margin:180px auto;}
    .fatherDiv span{height:100%;
                    width:0px;
                    display:inline-block;
                    vertical-align:middle;}
    .sonDiv{width:530px;
            height:260px;
            background-color:PowderBlue;
            display:inline-block;
            vertical-align:middle;}
    /* button 
    ---------------------------------------------- */ 
    .button { 
    display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
    *display: inline; 
    vertical-align: baseline; 
    margin: 0 2px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 1.5em .4em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    } 
    .button:hover { 
    text-decoration: none; 
    } 
    .button:active { 
    position: relative; 
    top: 1px; 
    } 
    
    /* blue */ 
    .blue { 
    color: #d9eef7; 
    border: solid 1px #0076a3; 
    background: #0095cd; 
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
    background: -moz-linear-gradient(top, #00adee, #0078a5); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 
    } 
    .blue:hover { 
    background: #007ead; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
    background: -moz-linear-gradient(top, #0095cc, #00678e); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 
    } 
    .blue:active { 
    color: #80bed6; 
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
    background: -moz-linear-gradient(top, #0078a5, #00adee); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 
    } 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" margin:0 auto;">
    <div class="fatherDiv">
       <span class="sonSpan"></span>
       <div class="sonDiv"><label style=" font-size:30px; margin-top:20px ">xxx管理系统</label>
       <table style=" margin:20px auto;">
      <tr style=" height:28px;">
        <td style=" width:140px"><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 账号:</label></td>
        <td style=" text-align:left;"><input  type="text" id="logUsername" placeholder="请输入账号" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td style=" width:140px"><label id="logUsernameRequired" style=" color:Red; display:none;">*账号不得为空</label></td>
      </tr>
      <tr style=" height:28px;">
        <td><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 密码:</label></td>
        <td style=" text-align:left;"><input  type="password" id="logPwd" placeholder="请输入密码" style=" height:25px; line-height:25px; font-size:16px; width:180px;"/></td>
        <td><label id="logPwdRequired" style=" color:Red; display:none;">*密码不得为空</label></td>
      </tr>
      <tr style=" height:28px;">
        <td><label>&nbsp;&nbsp;&nbsp;&nbsp; 验证码:</label></td>
        <td style=" text-align:left;"><input  type="text" id="tbVerificationCode" placeholder="验证码" style=" vertical-align:middle; width:88px; text-align:left; line-height:25px; font-size:16px;"/>
        <img id="Img1" src="/Captcha.ashx?codelength=4" alt="" onclick="javasrcipt: this.src='/Captcha.ashx?codelength=4&&id='+Math.random();$('#tbVerificationCode').val('');" runat="server"  style=" vertical-align:middle"/></td>
        <td><label id="logCodeValid" style=" color:Red; display:none;">*验证码错误</label></td>
      </tr>
        <tr style=" height:30px; line-height:30px; text-align:center; vertical-align:middle;">
        <td></td>     
        <td style=" text-align:left;height:30px;"><input  type="checkbox" value="rememberUserName" id="remUsername" class="checkbix" data-color="blue" value="remUserName" data-text="记住账号"/>
            <input  type="checkbox" value="rememberPwd" id="remPwd" class="checkbix" data-color="blue" value="remPwd" data-text="记住密码"/>
        </td>        
      </tr>
      <tr>
        <td></td>
        <td style=" text-align:left;"><input  type="button" value="登录" id="logLogin"  class="button blue"/>&nbsp;<input  type="button" value="取消" id="logClear" class="button blue"/></td>        
      </tr>
       <tr>
        <td></td>
        <td style=" text-align:left;"><input  type="button" value="注册" id="logRegister" class="button blue"/> <input  type="button" value="找回密码" id="logFindPwd" class="button blue"/></td>        
      </tr>
    </table>
       </div>
       <span class="sonSpan"></span>
     </div>
    
    </div>
    </form>
</body>
</html>
